import React from 'react'
import { Carousel, Statistic, Card, Row, Col, Timeline } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
export default function Home() {
    const { Countdown } = Statistic;
    const deadline = Date.now() + 1000 * 60 * 60 * 24 + 1000 * 30; // Moment is also OK
    const contentStyle: any = {
        width: "100%",
        height: '400px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
    };
    const onFinish = () => {

    }
    return (
        <div>
            <Carousel autoplay>
                <div>
                    <img style={contentStyle} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdali.zxdyw.com%2FU_Image%2F2017%2F0830%2Fe%2F20170830103002_3748.jpg&refer=http%3A%2F%2Fdali.zxdyw.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642215667&t=3ee8588c7191aeeafe398594ffb3caf5" alt="" />
                </div>
                <div>
                    <img style={contentStyle} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew8.photophoto.cn%2F20140331%2Fzhonghaiwuye-biaozhitupian-10310586_1.jpg&refer=http%3A%2F%2Fpicnew8.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642215721&t=b176cf3d479d263b35d19b94282333c4" alt="" />
                </div>
                <div>
                    <img style={contentStyle} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgwcs3.soufunimg.com%2Fnews%2F2019_03%2F20%2F4b1ad101-5256-47f0-8964-5632392fcbdf.jpg&refer=http%3A%2F%2Fimgwcs3.soufunimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642215562&t=bc0b48af4cbdea9a83d7efb35e8ac4ce" alt="" />
                </div>
                <div>
                    <img style={contentStyle} src="https://img0.baidu.com/it/u=3678536940,3539144616&fm=26&fmt=auto" alt="" />
                </div>
            </Carousel>
            <Row gutter={16}>
                <Col span={12}>
                    <Card>
                        <Statistic
                            title="季度物业费增长"
                            value={11.28}
                            precision={2}
                            valueStyle={{ color: '#3f8600' }}
                            prefix={<ArrowUpOutlined />}
                            suffix="%"
                        />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card>
                        <Statistic
                            title="业主同比减少"
                            value={9.3}
                            precision={2}
                            valueStyle={{ color: '#cf1322' }}
                            prefix={<ArrowDownOutlined />}
                            suffix="%"
                        />
                    </Card>
                </Col>
            </Row>
            <Row>
                <Col style={{marginTop:"40px"}}>
                    <Countdown title="距离下一次交物业费还有：" value={deadline} onFinish={onFinish} />
                </Col>
                <Col style={{marginTop:"40px",marginLeft:"40px"}}>
                    <Timeline>
                        <Timeline.Item>中海物业始于 2015-09-01</Timeline.Item>
                        <Timeline.Item>业主就是我们的上帝</Timeline.Item>
                        <Timeline.Item>我们很期待为业主服务</Timeline.Item>
                        <Timeline.Item>业主永远滴神</Timeline.Item>
                    </Timeline>
                </Col>
                <Col style={{marginTop:"40px",marginLeft:"40px"}}>
                    <Timeline>
                        <Timeline.Item>企业文化是企业的灵魂，是推动企业发展的不竭动力</Timeline.Item>
                        <Timeline.Item>企业文化能凝聚员工的归属感。</Timeline.Item>
                        <Timeline.Item>企业文化能加强员工的责任感。</Timeline.Item>
                        <Timeline.Item>企业文化能激发员工的使命感。</Timeline.Item>
                    </Timeline>
                </Col>
                <Col style={{marginTop:"40px",marginLeft:"20px"}}>
                    <Timeline>
                        <Timeline.Item>业主至上</Timeline.Item>
                        <Timeline.Item>服务至上</Timeline.Item>
                        <Timeline.Item>保安至上</Timeline.Item>
                        <Timeline.Item>我们至上</Timeline.Item>
                    </Timeline>
                </Col>
            </Row>
        </div>
    )
}
